<template>
  <div class="app-container">
    <el-card class="grouping" style="margin-top: 20px">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 66px">
          <el-tab-pane label="基础信息" name="first"></el-tab-pane>
          <el-tab-pane label="规格库存" name="second"></el-tab-pane>
          <el-tab-pane label="商品详情" name="third"></el-tab-pane>
          <el-tab-pane label="物流设置" name="fourth"></el-tab-pane>
          <el-tab-pane label="营销设置" name="five"></el-tab-pane>
          <el-tab-pane label="其他设置" name="six"></el-tab-pane>
          <el-tab-pane label="适用门店" name="seven"></el-tab-pane>

        </el-tabs>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="商品类型" prop="typer">
            <el-radio v-model="radio1" label="1" border>普通商品</el-radio>
            <el-radio v-model="radio1" label="2" border>虚拟商品</el-radio>
            <el-radio v-model="radio1" label="3" border>助农商品</el-radio>
            <el-radio v-model="radio1" label="4" border>积分商品</el-radio>
          </el-form-item>
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="商品单位" prop="region">
            <el-select v-model="form.region" placeholder="请选择单位">
              <el-option label="个" value="shanghai"></el-option>
              <el-option label="只" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <div>
              <tinymce-editor v-model="form.content" :height="360" />
            </div>
          </el-form-item>
          <el-form-item label="配送方式" prop="delivery">
            <el-checkbox-group v-model="form.delivery">
              <el-checkbox label="快递"></el-checkbox>
              <el-checkbox label="门店配送"></el-checkbox>
              <el-checkbox label="到店自提"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="上架时间">
            <el-radio-group v-model="form.resource">
              <el-radio label="立即上架"></el-radio>
              <el-radio label="定时上架"></el-radio>
              <el-radio label="放入仓库"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import TinymceEditor from '@/components/Tinymce'
export default {
  name: "add",
  components: { TinymceEditor },
  data() {
    const validateRequire = (rule, value, callback) => {
      if (value === '') {
        this.$messages({
          message: rule.field + '为必传项',
          type: 'error'
        })
        callback(new Error(rule.field + '为必传项'))
      } else {
        callback()
      }
    }
    return {
      radio1: '1',
      form: {
        content: '',//商品详情
        typer: '',//商品类型
        name: '',//商品名字
        region: '',//商品单位
        date1: '',
        date2: '',
        delivery: [],//配送方式
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择单位', trigger: 'change' }
        ],
        delivery: [
          { required: true, message: '请选择配送方式', trigger: 'change' }
        ],

      },//表单验证
      activeName: "first", //商品类型
    };
  },
  methods: {
    //确认提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //切换商品类型
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped></style>
